@extends('home.base')
@section('title')
    摄影集结地
@endsection




@section('content')
    <!--轮播图-->
    <div class="slider-container">
        <div class="slider-control left inactive"></div>
        <div class="slider-control right"></div>
        <ul class="slider-pagi"></ul>
        <div class="slider">
            <div class="slide slide-0 active">
                <div class="slide__bg"></div>
                <div class="slide__content">
                    <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
                        <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
                    </svg>
                    <div class="slide__text">
                        <h2 class="slide__text-heading">Landscape</h2>
                        <p class="slide__text-desc">风光摄影是自然景与人造景的再现，是气象变幻的瞬间记录；是摄影技巧和美妙景色结合的成果；同时也是形象思维和情感触发的艺术创作</p>
                        <a class="slide__text-link">风光摄影</a>
                    </div>
                </div>
            </div>
            <div class="slide slide-1 ">
                <div class="slide__bg"></div>
                <div class="slide__content">
                    <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
                        <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
                    </svg>
                    <div class="slide__text">
                        <h2 class="slide__text-heading">Humanities</h2>
                        <p class="slide__text-desc">人文纪实是忠实的记录和反应一个民族生存方式的照片</p>
                        <a class="slide__text-link">人文纪实</a>
                    </div>
                </div>
            </div>
            <div class="slide slide-2">
                <div class="slide__bg"></div>
                <div class="slide__content">
                    <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
                        <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
                    </svg>
                    <div class="slide__text">
                        <h2 class="slide__text-heading">Commercial</h2>
                        <p class="slide__text-desc">商业摄影，顾名思义是指作为商业用途而开展的摄影活动。</p>
                        <a class="slide__text-link">商业摄影</a>
                    </div>
                </div>
            </div>
            <div class="slide slide-3">
                <div class="slide__bg"></div>
                <div class="slide__content">
                    <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
                        <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
                    </svg>
                    <div class="slide__text">
                        <h2 class="slide__text-heading">Art</h2>
                        <p class="slide__text-desc">艺术摄影以摄影为表现手段，以社会生活和自然景象为表现对象，通过人的审美创造活动再现现实和表现情感的艺术实践。表现的对象虽是客观的、瞬间的，但却浸透着作者的艺术创造和思想情感。</p>
                        <a class="slide__text-link">艺术摄影</a>
                    </div>
                </div>
            </div>
            <div class="slide slide-4">
                <div class="slide__bg"></div>
                <div class="slide__content">
                    <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
                        <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
                    </svg>
                    <div class="slide__text">
                        <h2 class="slide__text-heading">Macroshot</h2>
                        <p class="slide__text-desc">微距摄影是区别于常规摄影的一种特殊的摄影方法，微距摄影是在近距离拍摄有关物体，并可以得到比原实物大的影像，放大倍率是1以上。</p>
                        <a class="slide__text-link">微距摄影</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">

        <section class="tt-grid-wrapper">
            <nav>
                <a class="tt-current">风光摄影</a><a>人文纪实</a><a>商业摄影</a><a>艺术摄影</a><a>微距摄影</a>
            </nav>
            <ul class="tt-grid tt-stacking-inversed tt-effect-fallrotate tt-effect-delay-reversed">
                <li><a href="#"><img src="img/1.jpg" alt="img01"/></a></li>
                <li><a href="#"><img src="img/2.jpg" alt="img02"/></a></li>
                <li><a href="#"><img src="img/3.jpg" alt="img03"/></a></li>
                <li><a href="#"><img src="img/4.jpg" alt="img04"/></a></li>
                <li><a href="#"><img src="img/5.jpg" alt="img05"/></a></li>
                <li><a href="#"><img src="img/6.jpg" alt="img06"/></a></li>
                <li><a href="#"><img src="img/1.jpg" alt="img01"/></a></li>
                <li><a href="#"><img src="img/2.jpg" alt="img02"/></a></li>
                <li><a href="#"><img src="img/3.jpg" alt="img03"/></a></li>
            </ul>

        </section>

    </div><!-- /container -->
@endsection